<template>
	
	
	<div style="width: 100%;">
		<div style="display: flex; width: 100%;">
			<el-button size="default" type="danger" style="background-color: #E1337F;" @click="add()">
				<el-icon><Plus /></el-icon>添加</el-button>
			<div style="width: 100%;"><p style="text-align: center;">客户管理</p></div>
		</div>
		<div style="background-color: #E1337F;height: 0.1rem;"/>
		<el-card >
		<div style="width: 100%;">
		<el-table :data="data.users" style="width: 100%">
			<el-table-column prop="uid" label="编号" />
			<el-table-column prop="uname" label="名称" />
			<el-table-column label="头像">
				<template #default="car">
					<el-image style="width: 100px;height: 100px;"
						:src="$ip+`/public/shows/`+car.row.pic" />
				</template>
			</el-table-column>

			<el-table-column prop="account" label="账号" />
			<el-table-column prop="phone" label="手机号" />
			<el-table-column  label="权限" >商家</el-table-column>
			<el-table-column label="操作"><template #default="car">
					<el-button v-if="car.row.closed==0" style="background-color: #E1337F;" size="default" type="danger" @click.prevent="del(car.row.uid)">
						<el-icon><Lock /></el-icon>冻结账号
					</el-button>
					<el-button v-if="car.row.closed!=0" style="background-color: #E1337F;" size="default" type="danger" @click.prevent="dels(car.row.uid)">
						<el-icon><Unlock /></el-icon>解除冻结
					</el-button>
				</template></el-table-column>
				<el-table-column label="操作"><template #default="car">
						<el-button style="background-color:#E1337F;" size="default" type="danger" @click.prevent="update(car.row.uid)">
							<el-icon><EditPen /></el-icon>更改
						</el-button>
					</template></el-table-column>
		</el-table>
		<div style="margin-left: 33%;">
						 <el-pagination  :total="data.page.count" :page-count="myCeil(data.page.count/data.page.l)"
						 layout="jumper , prev, pager ,next ,total" @current-change="pageQuery" /> 
					  </div>
		
		</div>
		</el-card >
		
		
	</div>
	
</template>

<script lang="ts" setup>
	import {ref, reactive,onMounted,computed} from"vue"
		import {$get,$postx,$postj,$postf} from '../../../ajax/index.js'
		import { ElMessage, ElMessageBox } from 'element-plus'
		import router from"../../../router/index.js"
		import store from "../../../store/index.js"
		import {Search,ShoppingCart,Plus,Delete,Loading,EditPen,Lock,Unlock} from '@element-plus/icons-vue'
		import bottom from "../../../components/bottom.vue"
		import {useRoute} from "vue-router"
		import {success,warning,message,errors} from '../../../store/alert.js'
		const data = reactive({
			users:[],
			page:{
				p:0,
				l:5,
				count:0
			}
		})

		function add(){
			
			router.push("/adm/cusadd")
		}
		
		function del(uid){
			$get("/adm/del/"+uid+"/3/"+data.page.p+"/"+data.page.l).then((read)=>{
				data.users=read.data.data.user
				data.page.count=read.data.data.count
				success(read.data.msg)
			})
		}
		function dels(uid){
			$get("/adm/dels/"+uid+"/3/"+data.page.p+"/"+data.page.l).then((read)=>{
				data.users=read.data.data.user
				data.page.count=read.data.data.count
				success(read.data.msg)
			})
		}
		function update(uid){
			
			router.push({
				path: '/adm/cusadd',
				query: {
					uid: uid
				}
			})
			
		}
		function pageQuery(val=1){
			// 翻页跳转
			
			let pagenum=data.page.l*val-data.page.l
			data.page.p=pagenum
			$get("/adm/findAll/3/"+data.page.p+"/"+data.page.l).then((read)=>{
				data.users=read.data.data.user
				data.page.count=read.data.data.count
				
			})
			
			}
		const myCeil = computed(() => {
				return function(a) {
					var s= Math.ceil(a)
					return s
				}
			})
		onMounted(()=>{
			$get("/adm/findAll/3/"+data.page.p+"/"+data.page.l).then((read)=>{
				data.users=read.data.data.user
				data.page.count=read.data.data.count
				
			})
			
		})

</script>

<style>
</style>
